<!--
 * @Descripttion: 网络异常页面
 * @version: 1.0.0
 * @Author: shuaishuai.han
 * @Date: 2022-03-14 10:27:05
-->
<template>
  <div class="refresh">
    <el-empty :description="description"></el-empty>
  </div>
</template>

<script>
export default {
  name: 'refresh',
  props: {
    // 展示的图片
    image: {
      type: String,
      default: 'network'
    },
    description: {
      type: String,
      default: '网络已断开，请检查网络'
    }
  },
  mounted() {
    // 防止页面后退
    history.pushState(null, null, document.URL);
    window.addEventListener('popstate', this.handleEvent, false);
  },
  methods: {
    handleEvent() {
      history.pushState(null, null, document.URL);
    }
  },
  destroyed() {
    window.removeEventListener('popstate', this.handleEvent, false);
  }
};
</script>

<style lang="less" scoped>
.refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
</style>
